<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <label class="btn btn-success mb-0">
                <input type="file" class="d-none" id="txtFile" /> 选择（拖拽、粘贴）文件
            </label>
            <label id="labSize" class="ml-3"></label>
        </div>
        <div class="col-md-12 my-2 nrEbox d-none">
            <div id="editor" class="border overflow-hidden position-relative min300">
            </div>
        </div>
        <div class="col-md-12 mb-2 d-none">
            <button class="btn btn-success" id="btnBase64ToFile">Base64转文件</button>
            <div id="viewBase64" class="mt-3"></div>
        </div>
    </div>
</div>

@Html.Raw(Netnr.SharedApp.QuoteTo.Html("monaco-editor"))

<script>

    //接收文件
    ss.receiveFiles(function (files) {
        fileAsBase64(files[0])
        $('#txtFile').val('')
    }, "#txtFile");

    var editor;
    function showCode(code) {
        if (editor) {
            editor.setValue(code);
        } else {
            require(['vs/editor/editor.main'], function () {
                $('.nrEbox').removeClass('d-none');
                $('#btnBase64ToFile').parent().removeClass('d-none');

                editor = monaco.editor.create(document.getElementById("editor"), ss.meConfig({
                    value: code,
                    language: 'html',
                    wordWrap: "on"
                }));
            });
        }
    }

    function fileAsBase64(file) {
        var r = new FileReader();
        r.onload = function () {
            showCode(this.result);
            $('#labSize').html("大小：" + (this.result.length / 1024).toFixed(1) + " K");
        }
        r.readAsDataURL(file);
    }

    function base64AsBlob(code) {
        var parts = code.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    };

    $('#btnBase64ToFile').click(function () {
        var code = editor.getValue();
        var blob = base64AsBlob(code);
        console.log(blob);
        var vbase = $('#viewBase64'), vnode;
        vbase.html('');
        if (blob.type.indexOf("image") >= 0) {
            vnode = document.createElement("img");
        }
        if (blob.type.indexOf("audio") >= 0) {
            vnode = document.createElement("audio");
            vnode.controls = true;
        }
        if (blob.type.indexOf("video") >= 0) {
            vnode = document.createElement("video");
            vnode.controls = true;
        }
        if (vnode) {
            vnode.src = URL.createObjectURL(blob);
        } else {
            vnode = document.createElement("a");
            vnode.href = URL.createObjectURL(blob);
            vnode.innerHTML = "下载";
        }
        vnode.style.maxWidth = "100%";
        vbase.append(vnode);
    });

    $(window).on('load', function () {
        if (typeof (FileReader) === 'undefined') {
            jz.alert("你的浏览器不支持 FileReader <br />请使用现代浏览器操作！");
            $('#txtFile')[0].disabled = true;
        }
    })
</script>